<template>
	<div style='height:100%;' ref='container'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
				show : false
			}
		},
		
		computed : {
			options () {
                var colorList = [
                    ['#564aff', '#7233ff'],
                    ['#96d110', '#55cc1a'],
                    ['#1b8fff', '#1dc7ff'],
                    ['#ef495f', '#f5664c']
                ]
                var W = this.$refs.container.clientHeight / 2
                var radius = W * 0.7
				var minAngle = 60
				var minRate = minAngle / 360
				var data = this.value
                
                data.sort(function(a, b) {
                    return b.value - a.value
                })

				var total = 0
				var sum = 0
				data.forEach((v, i) => {
					total += v.value
                    sum += v.value
                    
                    if(i == 0) {
                        v.radius = radius
                    }else {
                        if(v.value < data[i - 1].value) {
                            radius -= 5
                        }

                        v.radius = radius
                    }
				})

				var incrValue = 0
				var minValue = sum * minRate
				
				data.forEach(v => {
					v.v = v.value
					if(v.value < minValue) {
						incrValue += (minValue - v.value)
						v.value = minValue
					}
				})

				if(incrValue >= 1) {
					while(true) {
						for(let i = 0; i < data.length; i ++) {
							var item = data[i]
							if(item.value >= (minValue + 1)) {
								item.value --
								incrValue --
							}
						}
						if(incrValue < 1) {
							break
						}
					}
                }
                
                
                
				sum = 0
				data.forEach(v => {
                    sum += v.value
                })
                

				var startAngle = 360
				var series = []

				var offset = 0 / 360 * sum
				
				
				data.forEach((item, index) => {
                    var color = {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: colorList[index][0] // 0% 处的颜色
                            }, {
                                offset: 1, color: colorList[index][1] // 100% 处的颜色
                            }]
                        }
					var v = item.value
					var serie = {
						type : 'pie',
						startAngle : startAngle,
						silent : true,
						center : ['50%', '60%'],
						radius : ['45%', item.radius],
						labelLine: {
							show: true,
                            length: 20,
                            length2: 30,
                            lineStyle : {
                                color : '#5c6270'
                            }
						},
						label : {
							show : true,
							align : 'center',
							formatter (params) {
								var v = params.data
								var rate = (v.v / total * 100).toFixed(2)
								return `{name|${rate}% ${v.name}}\n{margin|}\n{hr|}\n{margin|}\n${v.v}`
							}
						},
						data   : [
							{name : item.name, value : v - offset, v : item.v, label : {color : '#fff', align : 'center', rich : {name : {color : '#a9abaf'}, margin : {height : 4, width : '100%'},hr : {height : 1, width : '100%', backgroundColor : '#5c6270'}}}, itemStyle : {color : color}},
							{name : item.name, value : sum - v, v : v, itemStyle : {color : 'transparent'}, label : {show : false}, labelLine : {show : false}}
						]
					}
					series.push(serie)
					startAngle -= (v / sum * 360)
				})
				
				var options =  {
					grid : {
						top : '0px',
						right : '0px',
						bottom : '0px',
						left : '0px'
					},

					series: series
				}

				return options
			}
		},

		mounted () {
			this.show = true
		}
	}
</script>